<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin:0;
            padding:0;
        }

        .main {
            width: 100%;
            height: 800px;
            position: relative;
        }

        #canvas {
            display:block;
            background:#000;
            position: absolute;
        }

    </style>
</head>
<body>
<div class="main">
    <canvas id="canvas"></canvas>
</div>



<script>
    window.onload = function() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        canvas.width = 700;
        canvas.height = 700;

        var radius = 0;

        function drawCircle() {
            ctx.beginPath();
            ctx.arc(100, 100, radius, 0, Math.PI * 2);
            ctx.closePath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255,255,50,1)';
            ctx.stroke();

            radius += 0.5;
            if (radius > 30) {
                radius = 0;
            }
        }

        function render() {
            var prev = ctx.globalCompositeOperation;
            ctx.globalCompositeOperation = 'destination-in';
            ctx.globalAlpha = 0.95;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.globalCompositeOperation = prev;
            drawCircle();
        }

        var testtimer = setInterval(function() {
            render();
        }, 20);
    }
</script>

</body>
</html>
